<template>
  <div>
    <div class="bg"></div>
    <image class="vein" src="http://cdn.rzico.com/v4.0/mine-bg.png"></image>
    <div>
      <div class="myAddress">
        <div class="myAddress_dashed">
          <div class="myAddress_areaName">
            <text class="myAddress_areaName_title">{{building}}</text>
          </div>
          <div class="myAddress_address">
            <text class="myAddress_address_title">{{address}}</text>
          </div>
        </div>
      </div>
      <div class="locationButton_title">
        <button  class="locationButton" @click="chooseLocation" :text="buttonName"></button>
      </div>
      <div class="myAddress_header" v-if="shopList.length>0">
        <div class="myAddress_header_line"></div>
        <div class="myAddress_header_titleBox">
          <text class="myAddress_header_title">附近站点</text>
        </div>
      </div>
      <div class="myAddress_list" v-for="item in shopList" @click="closePage(item.id,item.name)">
        <div class="maAddress_List_Logo">
          <image style="width:100px;height:100px;border-radius:100px" :src="item.logo"></image>
        </div>
        <div class="myAddress_List_Content">
          <div class="myAddress_List_Content_top">
            <text class="myAddress_List_Content_top_left">{{item.name}}</text>
            <text class="myAddress_List_Content_top_right" v-if="item.distance>=0">距离{{item.distance | number}}km</text>
          </div>
          <text style="margin-top:4px;" class="myAddress_name_title">店长：{{item.linkman}}</text>
          <text style="margin-top:4px;" class="myAddress_address_title">{{item.address}}</text>
        </div>
        <div class="myAddressIconBox">
          <text class="iconfont icon-arrow myAddressIcon"></text>
        </div>
      </div>
      <noData v-if="shopList.length == 0" noDataText="您所在区域暂时无法配送"></noData>
    </div>
  </div>
</template>

<script>
import {
  MCHLocation,LBSLocation
} from '../../api/amap'
import {
  getInfo
} from '../../api/mch'

import {
  lockSysUser
} from '../../api/member'

import gps from "../../utils/gps";

import noData from '../../components/noData/noData.vue'
const geolocation = app.requireModule("eeui/geolocation");
export default {
  data(){
    return{
      building: '请开启定位功能',
      address: '需要您的位置信息,安排最近配送站点',
      latitude: 0,
      longitude: 0,
      buttonName:'正在获取您的位置',
      shopList:[],
      location:true,
      sysMch:null
    }
  },
  pageResume: function(data) {

    let _this = this;
    let variable = eeui.getCaches('address')

    if (this.isNull(variable)) {

      _this.buttonName = "正在获取您的位置"
      geolocation.get((res) => {

        _this.buttonName = "修改收货地址";
        if (res!=null && res.latitude!=null && res.longitude!=null) {

            let postion = gps.gcj_encrypt(res.latitude,res.longitude);

            _this.latitude = postion.lat;
            _this.longitude = postion.lng

        } else {
            _this.latitude = 24.46;
            _this.longitude = 118.1;

        }

        _this.startLBSLocation(_this.latitude,_this.longitude)
        _this.startMCHLocation(_this.latitude,_this.longitude)

      })
    }

  },
  filters:{
    number(value) {
      var toFixedNum = Number(value).toFixed(3);
      var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
      return realVal;
    }
  },
  components:{
    noData
  },
  methods:{
    startLBSLocation(lat,lng) {
      var _this = this;
      LBSLocation({lat:lat,lng:lng}).then(res=>{
            _this.latitude = _this.latitude
            _this.longitude = _this.longitude
            _this.building = res.data.name
            _this.address = res.data.address
          }
      )
    },

    startMCHLocation:function (lat,lng) {
      var _this = this;
      _this.shopList = []
      console.info('dingwei')
      MCHLocation({isvId:10200,lat:lat,lng:lng}).then(res=>{
            console.log(res)
            console.log('222233333')
            if (res.data!=null) {
              _this.sysMch = res.data.sysMch
              _this.shopList = []
              _this.shopList.push(res.data.shop)
            }
          }
      )
    },

    chooseLocation: function () {
    //  选择地址获取定位
      var _this = this
      eeui.openPage({
        pageName:"selectArea",
        url: "root://pages/member/addressEdit/selectArea.js",
        statusBarType: 'immersion'
      }, (res)=>{
        if(res.status == "destroy" && res.pageName == "selectArea"){
          let variable = eeui.getCaches('address')
          if(!this.isNull(variable)){
            this.latitude= variable.location.split(",")[1]
            this.longitude= variable.location.split(",")[0]
            _this.buttonName = "修改收货地址"
            _this.startMCHLocation(_this.latitude,_this.longitude)
            this.building=variable.name
            this.address= variable.adName+variable.address
            _this.location = true
            eeui.setCaches('address',"")
          }
        }
      });
    },
    startLockSysUser() {
      lockSysUser({mchId:this.getGlobalData().mchId,shopId:this.getGlobalData().shopId}).then(res=>{
        console.log(res)
      })
    },
    closePage: function (id,name) {
      var _this = this
        let globalData = _this.getGlobalData();
        globalData.shopId = id;
        globalData.shopName = name;
        globalData.mchId = _this.sysMch.id
        globalData.mchName = _this.sysMch.name
        _this.location = true
        _this.setGlobalData(globalData)
        if (globalData.token!=null) {
            _this.startLockSysUser()
        }
      storage.setItem('amapType', 'true', event => {
        console.info('set success')
      })
      eeui.closePage()
    }
  }
}
</script>

<style scoped>

.vein {
  position: absolute;
  width: 750px;
  z-index: -1;
}

.bg {
  top:0;
  position: absolute;
  width: 750px;
  height: 600px;
  background-image: linear-gradient(to bottom, rgb(194, 194, 194), rgb(255, 255, 255));
  z-index: -1;
}

.myAddress {
  width: 690px;
  height: 340px;
  background-color: white;
  border-radius: 10px;
  margin-top: 160px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-left: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.myAddress_dashed {
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0,0,0,0.1);
  width: 660px;
  height: 320px;
  border-radius:10px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.myAddress_logo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  box-sizing: border-box;
  background-color: white;
  position: absolute;
  top: -65px;
  overflow: hidden
}
.myAddress_name {
  margin-top: 80px;
}
.myAddress_name_title{
  font-size: 26px;
  color: rgba(0, 0, 0, 0.2);
  display: block
}
.myAddress_areaName{
  margin-top: 25px;
}
.myAddress_areaName_title{
  font-size: 40px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.8)
}
.myAddress_address{
  margin-top: 25px;
}
.myAddress_address_title{
  font-size: 26px;
  color: rgba(0, 0, 0, 0.6);
  display: block;
  padding-left: 20px;
  padding-right: 20px;
}
.myAddress_header{
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.myAddress_header_line{
  width: 10px;
  height: 40px;
  background-color: #04D699;
}
.myAddress_header_titleBox{
  margin-left: 20px;
}
.myAddress_header_title{
  font-size: 40px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.8)
}
.myAddress_list{
  padding: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  border-bottom-color:#f2f2f2;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.maAddress_List_Logo{
  width: 100px;
  height: 100px;
  border-radius: 100px;
  overflow: hidden;
}
.myAddress_List_Content{
  width: 520px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.myAddress_List_Content_top{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.myAddress_List_Content_top_left{
  font-size: 30px;
}
.myAddress_List_Content_top_right{
  font-size: 26px;
  color: #04D699;
}
.myAddressIconBox{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 50px;
}
.myAddressIcon{
  font-size: 30px;
  color: #aaa;
}

.locationButton {
  height: 70px;
  width: 300px;
  margin-top: 40px;
  margin-bottom: 40px;
  font-size: 26px;
  background-color: green;
}
.locationButton_title{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>